<template>
    <el-table :data="matchArtData.list" height="500" style="width: 95%;margin-top: 40px;margin-left: 20px;">
     <el-table-column prop="projectname" label="项目名称" width="250" />
     <el-table-column prop="degree" label="获奖级别" width="250" />
     <el-table-column prop="date" label="获奖时间" width="250"/>
     
       <el-table-column label="操作" width="250"
         ><el-button text @click="centerDialogVisible = true" style="border: 1px solid rgb(12, 153, 240);">
   详情
 </el-button></el-table-column
       >
   
   </el-table>

   

 <el-dialog
   v-model="centerDialogVisible"
   title="项目详情"
   width="30%"
   :data="matchArtData.list"
   align-center
 >
   <span>项目名称： {{ matchArtData.list[currentId].projectname }}</span><tr></tr>
   <span>获奖级别：{{ matchArtData.list[currentId].degree }}</span><tr></tr>
   <span>获奖时间：{{ matchArtData.list[currentId].date  }}</span>
   <template #footer>
     <span class="dialog-footer">
       <el-button @click="centerDialogVisible = false">取消</el-button>
       
     </span>
   </template>
 </el-dialog>
</template>

 
<script lang="ts" setup>
import { ref } from 'vue'
import API from "../pluging/axiosInstance.js";
import { useRoute } from 'vue-router'
import { reactive } from "vue";


const route = useRoute()
const name = route.query.name
const id = route.query.id
console.log("matchart id:"+id)
function getData () {
  API({
   url: "/home/match/art",
   method: "post",
   data: {
      id:id
   },
 }).then((res) => {
   console.log(res.data)
   matchArtData.list=res.data.dataList
   console.log("请求成功!" + "请求数据：");
   console.log('项目名称：'+matchArtData.list[currentId].projectname );

   // console.log(loginData.id)
 });
};

getData()

const matchArtData = reactive({
 list:[{
   projectid:'',
   projectname:'',
   level: "",
   degree:'',
   descript: "",
   date:''
 }]
});


const centerDialogVisible = ref(false)

const  currentId=0;
</script>


<style scoped>
#nav{
 margin: 0px auto;
}

.dialog-footer button:first-child {
margin-right: 10px;
}

</style>
